<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>百度地图</title>
  <meta http-equiv="X-UA-Compatible" content="chrome=1" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <meta name="author" content="yb">
  <meta name="keywords" content="关键词" />
  <meta name="description" content="描述" />
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
  <meta http-equiv="Expires" content="0">
  <!-- <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> -->
  <script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
  <link rel="stylesheet" href="../style/css/base.css">
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=rGGrexyX4GyRWy76BD7Hpcnx79NuXydz"></script>
</head>
<style>
  html {
    height: 100%
  }

  body {
    height: 100%;
    margin: 0px;
    padding: 0px
  }

  #container {
    height: 100%;
  }
</style>

<body>
  <div id="container"></div>
  <script type="text/javascript">
    var map = new BMap.Map("container");
    // 创建地图实例  
    var point = new BMap.Point(116.404, 39.915);
    // 创建点坐标  
    map.centerAndZoom(point, 15);
    // 初始化地图，设置中心点坐标和地图级别

    // 是否能进行缩放
    map.enableScrollWheelZoom(true);

    //map.addControl(new BMap.NavigationControl());   // 平移缩放控件
    map.addControl(new BMap.OverviewMapControl()); // 缩略地图
    map.addControl(new BMap.ScaleControl()); // 比例尺
    map.addControl(new BMap.MapTypeControl()); // 地图类型
    map.addControl(new BMap.CopyrightControl()); // 版权
    map.addControl(new BMap.GeolocationControl()); // 定位

    map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用

    var opts = {
      type: BMAP_NAVIGATION_CONTROL_PAN
    } // 缩放空间的类型
    map.addControl(new BMap.NavigationControl(opts));

    var mapStyle = {
      style: "mapbox"
    }
    map.setMapStyle(mapStyle);

    // 向地图添加标注
    map.centerAndZoom(point, 15);
    var marker = new BMap.Marker(point); // 创建标注    
    map.addOverlay(marker); // 将标注添加到地图中 

    // 定义标注图标
    // var map = new BMap.Map("container");    
    // var point = new BMap.Point(116.404, 39.915);    
    map.centerAndZoom(point, 15); // 编写自定义函数，创建标注   
    function addMarker(point, index) { // 创建图标对象   
      var myIcon = new BMap.Icon("./转盘抽奖原理/images/1.png", new BMap.Size(23, 25), {
        // 指定定位位置。   
        // 当标注显示在地图上时，其所指向的地理位置距离图标左上    
        // 角各偏移10像素和25像素。您可以看到在本例中该位置即是   
        // 图标中央下端的尖角位置。    
        anchor: new BMap.Size(10, 25),
        // 设置图片偏移。   
        // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您   
        // 需要指定大图的偏移位置，此做法与css sprites技术类似。    
        imageOffset: new BMap.Size(0, 0 - index * 25) // 设置图片偏移    
      });
      // 创建标注对象并添加到地图   
      var marker = new BMap.Marker(point, {
        icon: myIcon
      });
      map.addOverlay(marker);
    }
    // 随机向地图添加10个标注    
    var bounds = map.getBounds();
    var lngSpan = bounds.maxX - bounds.minX;
    var latSpan = bounds.maxY - bounds.minY;
    for (var i = 0; i < 10; i++) {
      var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),
        bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));
      addMarker(point, i);
    }

    // 可点击的标注
    marker.addEventListener("click", function () {
      alert("您点击了标注");


    });
    // 可拖拽的标注
    marker.enableDragging();
    marker.addEventListener("dragend", function (e) {
      alert("当前位置：" + e.point.lng + ", " + e.point.lat);
    })

    // 添加折线
    var polyline = new BMap.Polyline([
      new BMap.Point(116.399, 39.910),
      new BMap.Point(116.405, 39.920)
    ], {
      strokeColor: "blue",
      strokeWeight: 6,
      strokeOpacity: 0.5
    });
    map.addOverlay(polyline);

    // -----------------------------------------------------------------------------
    // 定义自定义覆盖物的构造函数  
    function SquareOverlay(center, length, color) {
      this._center = center;
      his._length = length;
      this._color = color;
    }
    // 继承API的BMap.Overlay
    SquareOverlay.prototype = new BMap.Overlay();

    // 实现初始化方法  
    SquareOverlay.prototype.initialize = function (map) {
      // 保存map对象实例
      his._map = map;
      // 创建div元素，作为自定义覆盖物的容器
      var div = document.createElement("div");
      div.style.position = "absolute";
      // 可以根据参数设置元素外观
      div.style.width = this._length + "px";
      div.style.height = this._length + "px";
      div.style.background = this._color;
      // 将div添加到覆盖物容器中
      map.getPanes().markerPane.appendChild(div);
      // 保存div实例
      this._div = div;
      // 需要将div元素作为方法的返回值，当调用该覆盖物的show、
      // hide方法，或者对覆盖物进行移除时，API都将操作此元素。
      return div;
    }
  </script>
</body>

<script type="text/javascript">
</script>